<template>
  <div id="editWarden">
    <k-header headTitle="编辑管理员" goBack="true" rightTitle="删除" @rightClick="editdelet"/>
    <div class="wardenedit" :class="headIos?'side-fixd-ios':'side-fixed'">
      <div class="personalinfor">
        <ul v-for="opu in editifor" :key="opu.id">
          <li>
            <div class="wardenleft">姓名</div>
            <div class="wardenright">
              <input type="text" v-model="opu.realName"/>
            </div>
          </li>
          <li>
            <div class="wardenleft">手机号</div>
            <div class="wardenright">
              <input type="text" placeholder="将作为用户登录名" v-model="opu.mobile">
            </div>
          </li>
          <li>
            <div class="wardenleft">职位</div>
            <div class="wardenright">
              <input type="text" v-model="opu.position"/>
            </div>
          </li>
        </ul>
      </div>
      <p class="wardeng">权限</p>
      <group>
        <x-switch title="余额支付权限" v-model="value" @on-change="linespermis"></x-switch>
      </group>
      <div class="editbalance" v-if="modl">
        <div class="eidtba">
          <div class='editleft'>
            <input type="text" placeholder="输入可用余额 (数值需大于已用金额)" v-model="balanceprice"  maxlength="11"/>
          </div>
          <div class="editright">元</div>
        </div> 
        <p>(当前已用金额: {{ usermoney }}元)</p>
      </div>
    </div>
    <div class="wardenbtns" @click="editPreservation">保存</div>
    <toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask :text="message" position="bottom"></toast>
  </div>
</template>
<style scoped>
  ul,li {
    list-style: none;
  }
  .wardenedit {
    margin-top: 45px;
    padding: 1rem 0 0 0;
    font-size: 1.4rem;
  }
  .side-fixd-ios {
    margin-top: 65px;
  }
 .personalinfor {
   background-color: #fff;
 }
  .personalinfor li {
    overflow: hidden;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.2rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .personalinfor .wardenleft {
    float: left;
  }
  .personalinfor .wardenright {
    float: right;
    height: 4rem;
  }
  .wardenright input {
    height: 3.5rem;
    border: none;
    text-align: right;
    outline: none;
  }
  .wardeng {
    height: 4rem;
    line-height: 4rem;
    padding: 0 0 0 1.2rem;
  }
  .wardenbtns {
    background-color: #F89721;
    color: #fff;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 1.6rem;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .editbalance {
    /* height: 44px; */  
    background-color: #fff;
  }
  .editbalance p{
    clear: both;
    background-color: #F5F5F5;
    padding: 0 1.2rem;
    color: #808080;
  }
  .eidtba {
    overflow: hidden;
    padding: 0 1.2rem;
    border-bottom: 1px solid #ECECEC;
  }
  .editbalance .editleft {
    float: left;
    height: 44px;
    line-height: 44px;
    width: 80%;
  }
  .editbalance .editleft input {
    width: 100%;
    height: 3rem;
    border: none;
    outline: none;
  }
  .editbalance .editright {
    height: 44px;
    line-height: 44px;
    float: right;
  }
</style>
<script>
import kHeader from '../../common/head'
import { Group, XSwitch, Toast } from 'vux'
import util from '../../../libs/util'
export default {
  name: "editWarden",
  data() {
    return {
      value: false,
      ids: '',
      editname: '',
      modl: false,
      editmobile: '',
      editpost: '',
      balanceprice: '',
      headIos: '',
      message: '',
      showPositionValue: false,
      ceiling: '',
      editifor: '',
      usermoney: ''
    }
  },
  methods: {
    getname() {
      var that = this;
      var url = 'lblsapp-h5/v2/personCenter/showAdmin.json';
      let cans = {};
      cans.memberId = that.ids;
      util.ajax.post(url, cans).then(function(stats){
        that.editifor = stats.data.res.data
        for(let i=0;i< stats.data.res.data.length; i++){
          if (stats.data.res.data[0].isStatus == '1') {
            that.value = false;
            that.modl = false;
          } else {
            that.value = true;
            that.modl = true;
            that.usermoney = stats.data.res.data[0].amountByUsed;
          }
        }
      }).catch(function(error){
        console.log(error);
      })
    },
    editPreservation() {
      let drl = 'lblsapp-h5/v2/personCenter/adminEdit.json';
      var that = this;
      var cavs = {};
      var as = that.editifor;
      for (let i = 0; i < as.length; i++) {
        cavs.name = as[0].realName;
        cavs.memberId = as[0].memberId;
        cavs.position = as[0].position;
      }
      if(that.value){
        cavs.status = 0;
      }else {
        cavs.status = 1;
      }
      cavs.amount = that.balanceprice;
      if(that.balanceprice <= that.ceiling) {
        that.message = '输入额度不能低于当前已使用余额数';
        that.showPositionValue = true;
      } else {
        console.log(cavs);
        util.ajax.post(drl, cavs).then(function(stats){
          if(stats.data.code == '0') {
            that.$router.push('/setPermissions');
          }else {
            that.message = '当前修改不成功';
            that.showPositionValue = true;
          };
        }).catch(function(error){
          that.message = '网路请求错误';
          that.showPositionValue = true;
        })
      }
     
    },
    editdelet() {
      let trl = 'lblsapp-h5/v2/personCenter/adminDelete.json';
      var that = this;
      var delet = {};
      delet.memberId = that.ids;
      util.ajax.post(trl, delet).then(function(stats){
        if(stats.data.code == '0'){
          that.$router.push('/setPermissions');
        };
      }).catch(function(error){
        console.log(error);
      })
    },
    linespermis(value) {
      if (value) {
        this.modl = true;
      } else {
        this.modl = false;
      }
    }
  },
  components: {
    kHeader,
    Group,
    XSwitch,
    Toast
  },
  created() {
    this.ids = this.$route.query.id;
    if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
      this.headIos = true;
    }
    this.getname();
  }
}
</script>

